const phonePromoListEle = document.querySelector("#phone .promo-list")
const phoneBrickListEle = document.querySelector('#phone .brick-list');
const homeelePromoListEle = document.querySelector("#homeelec .promo-list")
const homeeleBrickListEle = document.querySelector('#homeelec .brick-list');
(function initData() {
    //手机数据请求
    $.get('../json/mi_phones.json').then((res) => {
        //手机数据渲染
        renderPromoList(res["promo-list"], phonePromoListEle)
        renderBrickList(res["brick-list"], phoneBrickListEle)
    })
    //家电数据请求
    $.get('../json/mi_homeele.json').then(res => {
        console.log(res)
        //家电数据渲染
        renderPromoList(res["promo-list"], homeelePromoListEle)
        renderBrickList(res["brick-list"], homeeleBrickListEle)
        bindBrickList()
    })


})()
//家电切换事件绑定
function bindBrickList(){
    const tabLis = document.querySelectorAll('#homeelec .tab-list li')
    const brickListUls = document.querySelectorAll("#homeelec .brick-list ul")
    tabLis.forEach(li => {
        li.onmouseenter = function () {
            const type = this.dataset.type
            const brickListUl = document.querySelector(`#homeelec .brick-list ul[data-type='${type}']`)
            clearClass(tabLis, 'tab-active')

            clearClass(brickListUls, "tab-content-active")
            this.classList.add('tab-active')
            brickListUl.classList.add("tab-content-active")

        }
    })
}

//清除素有元素的className,elements可以接受的对象包括,HTMLCollection,NodeList,[element,element],element
function clearClass(elements, className) {
    if (!elements.length) {//是单个元素
        elements.classList.remove(className)
    } else {
        const elementsArray = Array.from(elements)
        elementsArray.forEach(element => {
            element.classList.remove(className)
        })
    }
}
const detailUrl = '/detail.html'
//渲染左边推销产品
function renderPromoList(list, container) {
    const liStrList = list.map(item => {
        return `
        <li class="promo-item">
            <a href="${detailUrl}">
                <img src="${item.thumbnail}" alt="">
            </a>
        </li>`
    })
    const liStr = liStrList.join('')
    const html = `
    <ul>
        ${liStr}
    </ul>`
    container.innerHTML = html
}
//生成ul
function genBrickListUl(list, type, isactive = false) {
    const liStrList = list.map(item => {
        return `<li class="item">
        <div class="figure-img">
            <a href="${detailUrl}?select=${item.id}" target="_blank">
                <img src="${item.thumbnail}" alt="${item.title}">
            </a>
        </div>
        <h3><a href="" class="title">${item.title}</a></h3>
        <p class="desc">${item.desc}</p>
        <p class="price"><span>${item.price}</span>元</p>
        </li>`
    })
    const liStr = liStrList.join('')
    return html = `<ul class="${isactive ? 'tab-content-active' : ''}" data-type="${type}">${liStr}</ul>`
}
//渲染左边产品列表
function renderBrickList(brickList, container) {
    let html = ''
    for (let key in brickList) {
        const list = brickList[key]
        if (key == 'hot') {
            html += genBrickListUl(list, key, true)
        } else {
            html += genBrickListUl(list, key)
        }

    }
    container.innerHTML = html
}